<template>
<div>
  <div @click="dianzan" name="index" :class="{dian:flg}">
    <i class="iconfont icon-dianzan">{{ zan }}</i>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      flg: false,
      zan: 10
    }
  },
  methods: {
    dianzan () {
      this.flg = !this.flg
      if (this.flg) {
        this.zan++
      } else {
        this.zan--
      }
    }
  }
}
</script>

<style>
.dian{
  color: #ff7f21;
}
.iconfont{
  cursor: pointer;
}
</style>
